import {Avatar, Carousel, Col, Input, Layout, List, Row} from "antd";
import React, {Component} from "react";
import "./index.less";
import $ from "jquery";
import ModuleGroup from "../../components/moduleGroup";
import ModuleGroupRecommend from "../../components/moduleGroupRecommend";
import {inject, observer} from "mobx-react";
import {AxioInstance} from "../../api/AxiosHelper";
import {GET_COURSE_LIST, GET_RECOMMEND_LIST, GET_WEBSITE_MSG, SERVER_PICTURE_URL} from "../../api/APIURLDefine";
import {History} from "history";
import NoticeCenter from "../../components/NoticeCenter";

interface MainPageState {
    headerAlpha: number;
    recommendArray: any;
}

@inject("globalStore", "userStore")
@observer
class MainPage extends Component<{ globalStore?: any, history?: History }, MainPageState> {
    constructor(props) {
        super(props);
        this.state = {
            headerAlpha:
                document.documentElement.scrollTop > 50
                    ? 0
                    : 1 - document.documentElement.scrollTop / 50,
            recommendArray: null,
        };
    }

    componentDidMount() {

        //AxioInstance.get(`${GET_RECOMMEND_LIST}?count=7`).then((res: any) => (console.log(res.map((item:any,index:number)=>(console.log(item))))))
        $(window).scroll((data) => {
            this.setState({
                headerAlpha:
                    document.documentElement.scrollTop > 50
                        ? 0
                        : 1 - document.documentElement.scrollTop / 50,
            });
            $(".layout-header").css(
                `background`,
                `rgba(0, 0, 0, ${document.documentElement.scrollTop > 50
                    ? 1
                    : document.documentElement.scrollTop / 50
                })`
            );
        });
    }

    //通知公告
    renderNotice() {
        return <NoticeCenter/>
    }

    renderBanner() {
        const {website} = this.props.globalStore;
        return (
            <div>
                {
                    website.bannerRecords && website.bannerRecords.length > 0 &&
                    <Carousel style={{marginBottom: "0.2rem"}} autoplay={true} autoplaySpeed={3000}>
                        {
                            website?.bannerRecords?.map((element, index) => {
                                return <div key={index} style={{overflow: "hidden"}}>
                                    <img
                                        onClick={() => {
                                            if (element.url)
                                                window.open(element.url);
                                        }}
                                        style={{width: "100%"}}
                                        src={SERVER_PICTURE_URL + element.image}
                                    />
                                </div>
                            })
                        }
                    </Carousel>
                }
            </div>

        );
    }

    renderContent() {
        const {website} = this.props.globalStore;
        return (
            <div>
                {/*   <ModuleGroup {...this.props} requestData={() => {
                    return AxioInstance.get(`${GET_COURSE_LIST}/1/5`).then((res: any) => res)
                }} title="国家金课"/>*/
                }

                <ModuleGroupRecommend {...this.props} requestData={() => {
                    return AxioInstance.get(`${GET_RECOMMEND_LIST}?count=7`).then((res: any) => res)
                }} title="推荐课程" grid={true}/>


                {website && website.vr && <ModuleGroup {...this.props} path={"/courseList?mode=1"} requestData={() => {
                    return AxioInstance.get(`${GET_COURSE_LIST}/1/5`).then((res: any) => res)

                }} title="虚拟仿真实验课程"/>
                }
                {website && website.interactive &&
                <ModuleGroup {...this.props} path={"/courseList?mode=2"} requestData={() => {
                    return AxioInstance.get(`${GET_COURSE_LIST}/1/7`).then((res: any) => res)
                }} title="互动体验课程" grid={true}/>
                }
                {website && website.article &&
                <ModuleGroup {...this.props} path={"/courseList?mode=4"} requestData={() => {
                    return AxioInstance.get(`${GET_COURSE_LIST}/1/5`).then((res: any) => res)
                }} title="文章分享课程"/>
                }
            </div>
        );
    }

    private jumpToCourseList(mode: number) {
        this.props.history?.push({pathname: "courseList", search: "mode=" + mode});
    }

    renderRecommond() {
        return (
            <Row className="re-row" gutter={[16, 8]}>
                <Col span={12}>
                    <div className="re-col">
                        <div style={{width: "0.26rem", marginLeft: "0.27rem"}}>
                            <img style={{width: "0.26rem", height: "0.26rem"}}
                                 src="./ui/HomePage/icon_1.png"/>
                        </div>
                        <a onClick={this.jumpToCourseList.bind(this, 1)} className="title"
                           style={{width: "1.54rem"}}>虚拟仿真实验课</a>
                        <a>优质课程</a>
                        <a>新课推荐</a>
                    </div>
                </Col>
                <Col span={12}>
                    <div className="re-col">
                        <div style={{width: "0.26rem", marginLeft: "0.27rem"}}>
                            <img style={{width: "0.24rem", height: "0.23rem"}}
                                 src="./ui/HomePage/icon_2.png"/>
                        </div>
                        <a onClick={this.jumpToCourseList.bind(this, 2)} className="title"
                           style={{width: "1.09rem"}}>互动体验课</a>
                        <a>VR体验课程</a>
                        <a>AR体验课程</a>
                        <a style={{width: "auto"}} className="hide-text-1-column">全景体验课程</a>
                    </div>
                </Col>
                <Col span={12}>
                    <div className="re-col">
                        <div style={{width: "0.26rem", marginLeft: "0.27rem"}}>
                            <img style={{width: "0.26rem", height: "0.26rem"}}
                                 src="./ui/HomePage/icon_3.png"/>
                        </div>
                        <a onClick={this.jumpToCourseList.bind(this, 4)} className="title"
                           style={{width: "1.09rem"}}>文章分享课</a>
                        <a style={{marginLeft: "0.7rem"}}>经验分享</a>
                        <a>教程文档</a>
                    </div>
                </Col>
                <Col span={12}>
                    <div className="re-col">
                        <div style={{width: "0.26rem", marginLeft: "0.27rem"}}>
                            <img style={{width: "0.26rem", height: "0.26rem"}}
                                 src="./ui/HomePage/icon_4.png"/>
                        </div>
                        <a onClick={this.jumpToCourseList.bind(this, 3)} className="title"
                           style={{width: "0.65rem"}}>直播课</a>
                        <a style={{marginLeft: "0.72rem"}}>正在直播</a>
                        {/* <a>教程文档</a> */}
                    </div>
                </Col>
            </Row>
        );
    }

    render() {
        return (
            <div style={{minWidth: 1200}}>
                {this.renderBanner()}
                {/*{this.renderRecommond()}*/}
                {this.renderNotice()}
                {this.renderContent()}
            </div>
        );
    }
}

export default MainPage;
